<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <title>选择文件</title>
</head>
<body>

<div style="display: flex;flex-direction: row;align-items: center">
    <h3>选择文件</h3>
    <a style="margin-left: 20px" href="javascript:location.reload()"><h5>刷新</h5></a>
</div>

默认：<input type="file">
<br><br>
图片(image/*,multiple)：<input type="file" accept="image/*" multiple="multiple">
<br><br>
相机(image/*,multiple,capture) ：<input type="file" accept="image/*" multiple="multiple" capture>
<br><br>
摄像(video/*,capture)：<input type="file" accept="video/*" capture="">
<br><br>
录音(audio/*,capture)：<input type="file" accept="audio/*" capture>
<br><br>

<div style="display: flex;flex-direction: column">
    <label>图片(base64)</label>
    <img style="width: 200px;height: 350px"
         src=""/>
    <label>图片(image)</label>
    <img style="width: 200px;height: 350px" src="https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=&url=https%3A%2F%2Fpics1.baidu.com%2Ffeed%2F64380cd7912397dde374758c982e22b8d1a28761.png%40f_auto%3Ftoken%3D433e843c524cb37bc64d1ebe9446135e&thumburl=https%3A%2F%2Fimg1.baidu.com%2Fit%2Fu%3D542445949%2C3610541939%26fm%3D253%26fmt%3Dauto%26app%3D138%26f%3DPNG%3Fw%3D500%26h%3D710&iswise=0"/>
</div>

</body>
</html>
